<blockquote class="layui-elem-quote">
    <div class="layui-inline">
        <i class="layui-icon layui-icon-list layui-head-icon"></i>
        <span class="layui-font-16 layui-font-green">添加商品</span>
    </div>
</blockquote>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" value="{$row.sort|default=0}" lay-verify="required"
                           placeholder="" autoComplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择分类</label>
                <div class="layui-input-block">
                    <select name="category_id" lay-verify="required" lay-search id="category-id">
                        <option value="">请选择分类</option>
                        {foreach $categoryOptions as $vo}
                        <option value="{$vo.path}-{$vo.id}">{$vo.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="goods_name" value="{$row.goods_name|default=''}" required
                           lay-verify="required" placeholder="请输入商品名称" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品标签</label>
                <div class="layui-input-block">
                    {foreach $tagOptions as $option}
                    <input type="checkbox" name="tag_id[]" class="tag" title="{$option.tag_name}" value="{$option.id}"
                           {notempty name="$row.tags"}
                               {if in_array($option.id,$row.tags) }
                               checked
                               {/if}
                           {/notempty}
                    >
                    {/foreach}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">限购会员</label>
                <div class="layui-input-block">
                    {foreach $gradeOptions as $opt}
                    <input type="checkbox" {if
                           condition="!empty($row.restricted_members) and  in_array($opt['id'],$row.restricted_members)"
                           } checked {/if}
                    name="restricted_members[]" value="{$opt.id}" title="{$opt.grade_name}">
                    {/foreach}
                </div>
                <div class="layui-form-mid layui-word-aux layui-font-red">选择限购会员后,商品只限于已选择的会员购买!</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品图片</label>
                <div class="layui-input-block">
                    <table class="layui-table" id="images">
                        <tr>
                            <th width="90px">商品主图</th>
                            <th>商品轮播图</th>
                        </tr>
                        <tr>
                            <td>
                                <img src="{$row.main_image|default='/static/admin/img/upimg.png'}" class="layui-upimg" id="main-image">
                                <input type="hidden" name="main_image" id="main_image"
                                       value="{$row.main_image|default=''}">
                            </td>
                            <td>
                                {notempty name='$row.goods_images'}
                                    {foreach $row.goods_images as $img}
                                    <div class="layui-inline">
                                        <img src="{$img}" class="layui-mul-upimg">
                                        <input type="hidden" name="goods_images[]" value="{$img}">
                                        <i class="layui-icon layui-upimg-close">&#x1006</i>
                                    </div>
                                    {/foreach}
                                {/notempty}
                                <div class="layui-inline">
                                    <img src="/static/admin/img/upimg.png" class="layui-upimg"
                                         id="goods-images">
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否开启积分赠送</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_give_integral" value="1" title="开启">
                    <input type="radio" name="is_give_integral" value="0" checked title="关闭">
                </div>
                <div class="layui-form-mid layui-word-aux layui-font-red">开启积分赠送后,请确保营销管理积分设置中,积分比列已配置!</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否开启补贴价</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_subsidy" value="1"  title="开启">
                    <input type="radio" name="is_subsidy" value="0" checked title="关闭">
                </div>
                <div class="layui-form-mid layui-word-aux layui-font-red">开启补贴价后,商品将会以补贴价结算,请认真填写!</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开启免费拿</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_free_task" value="1" checked title="开启">
                    <input type="radio" name="is_free_task" value="0"  title="关闭">
                </div>
                <div class="layui-form-mid layui-word-aux layui-font-red">开启免费拿后,商品将会以邀请好友数进行结算,请认真填写!</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邀请好友数</label>
                <div class="layui-input-inline">
                    <input type="number" class="layui-input" name="invite_friend_num" value="1">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">免费拿任务到期时间/h</label>
                <div class="layui-input-inline">
                    <input type="number" class="layui-input" name="free_expire_time" value="1">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品规格</label>
                <div class="layui-input-block">
                    <input type="radio" name="spec_type" value="2" lay-filter="spec-type" checked title="多规格">
                    <input type="radio" name="spec_type" value="1" lay-filter="spec-type" title="单规格">
                </div>
            </div>
            <div id="double" class="{if !empty($row.spec_type) && $row.spec_type==1}layui-hide{/if}">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <a class="layui-btn" id="group-add">添加分组</a>
                        </div>
                        <input type="hidden" name="goods_attr" id="attrs" value="{$row.goods_attr|default=''}">
                        <input type="hidden" name="skus" id="skus" value="{$row.items|default=''}">
                        <div id="group">
                            <div class="group-item">
                                <div class="group-parent">
                                    <div class="layui-inline">
                                        <input type="text" class="layui-input group_key" value="默认规格组"/>
                                    </div>
                                    <div class="layui-inline">
                                        <a class="layui-btn layui-btn-normal group-add">添加规格</a>
                                    </div>
                                    <div class="layui-inline">
                                        <a class="layui-btn layui-btn-danger group-del">删除分组</a>
                                    </div>
                                </div>
                                <div class="group-son">
                                    <div class="layui-inline group-son-item">
                                        <div class="layui-inline">
                                            <input type="text" lay-verify="required"
                                                   class="layui-input group_val" value="默认规格"/>
                                        </div>
                                        <div class="layui-inline">
                                            <a class="layui-btn layui-btn-danger group-item-del">删除</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <table class="layui-table" id="group-table">

                        </table>
                    </div>
                </div>
            </div>
            <div id="single" class="{if empty($row.spec_type)}layui-hide{elseif !empty($row.spec_type) && $row.spec_type==2}layui-hide{/if}">
                <div class="layui-form-item">
                    <label class="layui-form-label">原价</label>
                    <div class="layui-input-inline">
                        <input type="text" value="{$row.market_price|default='0.00'}" class="layui-input" name="market_price">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">现价</label>
                    <div class="layui-input-inline">
                        <input type="text" value="{$row.sell_price|default='0.00'}" class="layui-input" name="sell_price">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">补贴价</label>
                    <div class="layui-input-inline">
                        <input type="text" value="{$row.subsidy_price|default='0.00'}" class="layui-input" name="subsidy_price">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">库存</label>
                    <div class="layui-input-inline">
                        <input type="number" value="{$row.stock|default='0'}" class="layui-input" name="stock">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">初始虚拟销量</label>
                <div class="layui-input-inline">
                    <input type="number" value="0" class="layui-input" name="total_sale">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品详情</label>
                <div class="layui-input-block">
                    <textarea name="content" id="content">{$row.goodsContent.content|default=''}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否上架</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" checked title="上架">
                    <input type="radio" name="status" value="0" title="下架">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formGoods">保存商品</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="/static/js/sku.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        tinymce.init({
            selector: '#content',
            language: 'zh_CN',
            plugins: 'preview image  emoticons table link hr anchor fullscreen lists',
            toolbar: 'bold italic underline strikethrough alignleft aligncenter alignright alignjustify indent outdent numlist bullist ' +
                'fontselect fontsizeselect forecolor backcolor blockquote removeformat ' +
                'emoticons image link hr anchor fullscreen preview',
            images_upload_url: '/store/upload/layedit',
            min_height: 500,
            setup: function (editor) {
                editor.on('change', function () {
                    editor.save();
                });
            },
        });
        skuInit([
            {key: 'market_price', val: '原价', type: 'input'},
            {key: 'sell_price', val: '现价', type: 'input'},
            {key: 'subsidy_price', val: '补贴价', type: 'input'},
            {key: 'stock', val: '库存', type: 'input'},
        ])
    })

    layui.use(['form', 'upload'], function () {
        var form = layui.form, upload = layui.upload;
        form.on('radio(spec-type)', function (data) {
            if (data.value == 1) {
                $('#double').addClass('layui-hide');
                $('#single').removeClass('layui-hide');
            }
            if (data.value == 2) {
                $('#single').addClass('layui-hide');
                $('#double').removeClass('layui-hide');
            }
        });


        upload.render({
            elem: "#main-image",
            accept: 'images',
            field: "image",
            url: "/store/upload",
            done: function (res) {
                if (res.code == 1) {
                    let that = this.item;
                    that.attr('src', res.src)
                    $('#main_image').val(res.src);
                }
            }
        });

        upload.render({
            elem: "#goods-images",
            accept: 'images',
            field: "image",
            url: "/store/upload",
            multiple: true,
            number: 6,
            done: function (res) {
                if (res.code == 1) {
                    let that = this.item;
                    let imgTpl = '<div class="layui-inline">' +
                        '<img src="' + res.src + '" class="layui-mul-upimg">' +
                        '<input type="hidden" name="goods_images[]" value="' + res.src + '">' +
                        '<i class="layui-icon layui-upimg-close">&#x1006</i>' +
                        '</div>';
                    that.parent('div').before(imgTpl);
                }
            }
        });

        $('#images').on('click', '.layui-upimg-close', function () {
            $(this).parents('.layui-inline').remove();
        });

        form.on('submit(formGoods)', function (data) {
            let tags = [];
            $('.tag:checked').each(function (){
                tags.push({tag_name:$(this).attr('title')});
            });
            data.field.tags = JSON.stringify(tags);
            $.post('/store/goods/save', data.field, function (res) {
                if (res.code == 1) {
                    $.pjax({container: '#main', fragment: '#main', url: '/store/goods'});
                    return false;
                }
                return layer.msg(res.msg, {icon: 2});
            });

            return false;
        });


    });
</script>